
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="style-src 'unsafe-inline'; script-src 'nonce-{{nonce}}';">

    <style type="text/css">
        @media (max-width: 1140px) {
            #sidebar {
                display: none;
            }
            #main {
                max-width: 800px;
                padding: 0px 20px;
                margin: auto;
            }
        }

        .page-margins {
            vertical-align: top;
            padding-top: 40px;
            padding-bottom: 10px
        }

        .sidebar {
            width: 290px;
            position: fixed;
            z-index: 1;
            left: 45px;
            overflow-x: hidden;
        }

        .error {
            color: var(--vscode-inputValidation-errorForeground);
            background: var(--vscode-inputValidation-errorBackground);
            border: solid 1px var(--vscode-inputValidation-errorBorder);
            white-space: pre-wrap;
            display: none;
            padding: 1px 4px 4px 4px;
        }

        .headerBtn,
        .headerBtn:hover,
        .headerBtn:active {
            cursor: pointer;
            color: var(--vscode-foreground);
            background: var(--vscode-background);
            border: 0px;
            padding: 0px;
            outline: none;
        }

        .headerBtn:focus {
            outline: 1px solid -webkit-focus-ring-color;
            outline-offset: 3px;
        }

        .expand:after {
            font-weight: bold;
            float: right;
            margin-right: 6px;
            margin-top: -4px;
            content: '\276E';
            transform: rotate(270deg);
        }

        .collapse:after {
            font-weight: bold;
            float: right;
            margin-right: 6px;
            margin-top: -4px;
            content: '\276E';
            transform: rotate(90deg);
        }

        .main {
            max-width: 800px;
            margin-left: 320px;
            padding: 0px 30px;
        }

        .main-title {
            font-weight: 500;
            font-size: 22px;
            padding-bottom: 6px;
            color: var(--vscode-foreground);
        }

        .section {
            padding-bottom: 35px;
        }

        .section-title {
            font-weight: 500;
            font-size: 14px;
            padding-bottom: 4px;
            color: var(--vscode-foreground);
        }

        .section-text {
            font-size: 14px;
            padding-bottom: 8px;
            color: var(--vscode-foreground);
        }

        .section-note {
            font-size: 14px;
            font-style: italic;
            padding-bottom: 2px;
            color: var(--vscode-foreground);
        }

        .codeblock {
            vertical-align: middle;
            padding: 2px 8px;
            margin-top: 8px;
            display: inline-block;
            font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
            border-radius: 5px;
        }

        body {
            line-height: 19px
        }

        body:not(.tabbing) button:focus {
            outline: none;
        }

        a {
            text-decoration: none
        }

        checkbox {
            color: var(--vscode-settings-checkboxForeground);
            background: var(--vscode-settings-checkboxForeground);
            border: var(--vscode-settings-checkboxBorder);
        }

        a:focus,
        input:focus,
        select:focus,
        textarea:focus {
            outline: 1px solid -webkit-focus-ring-color;
            outline-offset: -1px
        }

        hr {
            border: 0;
            height: 1px;
            border-bottom: 1px solid;
        }

        h1 {
            padding-bottom: .3em;
        }

        h1,
        h2,
        h3 {
            font-weight: 400
        }

        a:hover {
            text-decoration: underline
        }

        ::placeholder {
            color: var(--vscode-input-placeholderForeground);
        }

        input {
            height: 17px;
            padding: 6px;
            border: solid 1px;
            font-size: 13px;
            font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
            color: var(--vscode-settings-textInputForeground);
            background: var(--vscode-settings-textInputBackground);
            border: 1px solid var(--vscode-settings-textInputBorder);
        }

        textarea {
            white-space: nowrap;
            padding: 4px, 4px;
            font-size: 13px;
            font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
            color: var(--vscode-settings-textInputForeground);
            background: var(--vscode-settings-textInputBackground);
            border: 1px solid var(--vscode-settings-textInputBorder);
        }

        button {
            color: var(--vscode-button-foreground);
            background-color: var(--vscode-button-background);
            border: solid 1px var(--vscode-contrastBorder);
            padding: 6px 14px;
        }

        button:hover {
            background-color: var(--vscode-button-hoverBackground);
        }

        button:focus {
            outline: 1px solid -webkit-focus-ring-color;
            outline-offset: 2px
        }

        button:active {
            outline: none;
        }

        .select-default {
            width: 300px;
            height: 27px;
            font-size: 13px;
            font-family:sans-serif;
            color: var(--vscode-settings-dropdownForeground);
            background: var(--vscode-settings-dropdownBackground);
            border: 1px solid var(--vscode-settings-dropdownBorder);
        }

        .select-editable {
            position: relative;
            background-color: var(--vscode-settings-textInputBackground);
            width: 800px;
            height: 31px;
        }

        .select-editable select {
            position: absolute;
            font-size: 13px;
            font-family: sans-serif;
            border: 1px solid var(--vscode-settings-textInputBorder);
            height: 31px;
            margin: auto;
            color: var(--vscode-settings-textInputForeground);
            background: var(--vscode-settings-textInputBackground);
        }

        .select-editable input {
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            height: 17px;
            font-size: 13px;
            border: none;
            color: var(--vscode-settings-textInputForeground);
            background: var(--vscode-settings-textInputBackground);
        }

        .select-editable input:focus {
            outline-offset: 0px;
        }

        blockquote {
            margin: 0 7px 0 5px;
            padding: 0 16px 0 10px;
            border-left: 5px solid;
        }

        code {
            font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
            line-height: 19px
        }

        .mac code {
            line-height: 18px
        }

        code > div {
            padding: 16px;
            border-radius: 3px;
            overflow: auto
        }

        .monaco-tokenized-source {
            white-space: pre
        }

        /** Theming */

        .vscode-light {
            color: #1e1e1e
        }

        .vscode-dark {
            color: #ddd
        }

        .vscode-high-contrast {
            color: #fff
        }

        .vscode-light code {
            color: #a31515
        }

        .vscode-dark code {
            color: #d7ba7d
        }

        .vscode-light code > div {
            background-color: rgba(220, 220, 220, .4)
        }

        .vscode-dark code > div {
            background-color: rgba(10, 10, 10, .4)
        }

        .vscode-light .input-disabled {
            background-color:rgba(255, 255, 255, 0.4);
            color: rgb(138, 138, 138);
            border: solid 1px rgb(201, 198, 198);
        }

        .vscode-dark .input-disabled {
            background-color: rgba(255, 255, 255, 0.1);
            color: rgb(167, 167, 167);
        }

        .vscode-high-contrast .input-disabled {
            background-color: transparent;
            color: #fff;
            border: solid 1px rgb(255, 255, 255);
        }

        .vscode-high-contrast code > div {
            background-color: #000
        }

        .vscode-high-contrast h1 {
            border-color: #000
        }

        .vscode-light table > thead > tr > th {
            border-color: rgba(0, 0, 0, .69)
        }

        .vscode-dark table > thead > tr > th {
            border-color: rgba(255, 255, 255, .69)
        }

        .vscode-light h1,
        .vscode-light hr,
        .vscode-light table > tbody > tr + tr > td {
            border-color: rgba(0, 0, 0, .18)
        }

        .vscode-dark h1,
        .vscode-dark hr,
        .vscode-dark table > tbody > tr + tr > td {
            border-color: rgba(255, 255, 255, 0.18)
        }

        .vscode-light blockquote,
        .vscode-dark blockquote {
            background: rgba(127, 127, 127, .1);
            border-color: rgba(0, 122, 204, .5)
        }

        .vscode-high-contrast blockquote {
            background: transparent;
            border-color: #fff
        }

        .vscode-light div.codeblock {
            background-color: rgba(0, 0, 0, 0.048)
        }

        .vscode-dark div.codeblock {
            background-color: rgba(255, 255, 255, 0.1)
        }

        .vscode-high-contrast div.codeblock {
            background-color: rgba(255, 255, 255, 0.15)
        }

        .footer {
            padding: 25px;
            text-align: center
        }

        .vscode-light a {
            color: #4080D0
        }

        .vscode-dark a {
            color: #a2c1e8
        }

    </style>

  </head>

  <body class="page-margins">

  <!-- sidebar -->
  <div id="sidebar" class="sidebar">

    <div style="height: 90px; display: block">
        <table>
            <td>
              <img src="{{cpp_image_uri}}" height="76" width="76" alt="Microsoft C/C++ Extension" title="Microsoft C/C++ Extension" style="padding-right: 10px" data-loc-id-title="microsoft.c.cpp.extension">
            </td>
            <td>
                <div style="font-size: 20px; font-weight: 400; line-height: 24px">Microsoft<br><span data-loc-id="c.cpp.extension">C/C++ Extension</span></div>
            </td>
          </table>
    </div>

    <hr>
    <div style="height: 30px; display: block"></div>

    <div style="padding-right: 10px; color: var(--vscode-foreground);">
        <span data-loc-id="open.this.editor">Open this editor by using the command:</span><br>
        <code data-loc-id="edit.configurations.ui">C/C++: Edit configurations (UI)</code>

        <div style="height: 30px; display: block"></div>

        <span data-loc-id="switch.to.json">Switch to the <a href="command:C_Cpp.ConfigurationEditJSON" title="Edit configurations in JSON file" data-loc-id-title="edit.configurations.in.json">c_cpp_properties.json</a> file by clicking on the file link or using the command:</span><br> 
        <code data-loc-id="edit.configurations.json">C/C++: Edit configurations (JSON)</code>

        <div style="height: 30px; display: block"></div>

        <span data-loc-id="check.the.schema">Learn more about the C/C++ properties by going to <a href="https://code.visualstudio.com/docs/cpp/c-cpp-properties-schema-reference" title="Properties Schema Reference" data-loc-id-title="view.schema.reference">C/C++ Properties Schema Reference</a>.</span><br>
    </div>

  </div> <!-- sidebar end -->

  <!-- main -->
  <div id="main" class="main">

    <!-- title -->
    <div style=" height: 90px; display: inline-block;">
      <div class="main-title" data-loc-id="intellisense.configurations">IntelliSense Configurations</div>
      <div style="color: var(--vscode-foreground);">
        <span data-loc-id="intellisense.configurations.description">Use this editor to edit IntelliSense settings defined in the underlying <a href="command:C_Cpp.ConfigurationEditJSON" title="Edit configurations in JSON file" data-loc-id-title="edit.configurations.in.json">c_cpp_properties.json</a> file. Changes made in this editor only apply to the selected configuration. To edit multiple configurations at once go to <a href="command:C_Cpp.ConfigurationEditJSON" title="Edit configurations in JSON file" data-loc-id-title="edit.configurations.in.json">c_cpp_properties.json</a>.</span>
      </div>
    </div>

    <hr>
    <div style="height: 30px; display: block"></div>

    <!-- sections -->
    <div class="section">
      <div class="section-title" data-loc-id="configuration.name">Configuration name</div>
      <div class="section-text" data-loc-id="configuration.name.description">A friendly name that identifies a configuration. <code>Linux</code>, <code>Mac</code>, and <code>Win32</code> are special identifiers for configurations that will be auto-selected on those platforms.</div>
      <div>
        <div class="section-note" data-loc-id="select.configuration.to.edit">Select a configuration set to edit.</div>
        <table>
            <tr>
            <!-- select configuration name -->
            <td>
                <div class="select-editable" style="width: 300px; margin-right: 10px">
                    <select id="configSelection" style="width: 300px"></select>
                    <input id=configName style="width: 267px" type="text"/>
                </div>
            </td>
            <!-- input configuration name -->
            <td style="vertical-align: middle;">
                <div id=addConfigDiv style="display: block">
                    <button id=addConfigBtn data-loc-id="add.configuration.button">Add Configuration</button>
                </div>
                <div id=addConfigInputDiv style="display: none; width: 400px;">
                    <input id=addConfigName type=text style="width: 200px; margin-right: 6px" placeholder="Configuration name..." data-loc-id-placeholder="configuration.name.input"/> 
                    <button id=addConfigOk style="margin-right: 6px" data-loc-id="ok.button">OK</button>
                    <button id=addConfigCancel data-loc-id="cancel.button">CANCEL</button>
                </div>
            </td>
        </tr>
        </table>
      </div>
    </div>

    <div class="section">
        <div class="section-title" data-loc-id="compiler.path">Compiler path</div>
        <div class="section-text">
            <span data-loc-id="compiler.path.description">The full path to the compiler you use to build your project, e.g. <code>/usr/bin/gcc</code>, to enable more accurate IntelliSense. The extension will query the compiler to determine the system include paths and default defines to use for IntelliSense.</span>
        </div>
        <!-- input compilerPath -->
        <div class="section-note" data-loc-id="specify.a.compiler">Specify a compiler path or select a detected compiler path from the drop-down list.</div>
            <div class="select-editable">
                <span id="noCompilerPathsDetected" style="display: none" data-loc-id="no.compiler.paths.detected">(No compiler paths detected)</span>
                <select id="knownCompilers" style="width: 810px; display: none"></select>
                <input name="inputValue" id="compilerPath" style="width: 777px; display: none" type="text"/>
            </div>
        <div id="compilerPathInvalid" class="error" style="width: 800px"></div>
        <!-- input compilerPath end -->
    </div>

    <div class="section">
        <div class="section-title" data-loc-id="compiler.args">Compiler arguments</div>
        <div class="section-text" data-loc-id="compiler.arguments">Compiler arguments to modify the includes or defines used, e.g. <code>-nostdinc++</code>, <code>-m32</code>, etc.</div>
        <div>
            <div class="section-note" data-loc-id="one.argument.per.line">One argument per line.</div>
            <textarea name="inputValue" id="compilerArgs" rows="4" cols="93" style="width: 800px"></textarea>
        </div>
    </div>

    <div class="section">
        <div class="section-title" data-loc-id="intellisense.mode">IntelliSense mode</div>
        <div class="section-text">
            <span data-loc-id="intellisense.mode.description">The IntelliSense mode to use that maps to an architecture-specific variant of MSVC, gcc, or Clang. If not set or if set to <code>${default}</code>, the extension will choose the default for that platform. Windows defaults to <code>msvc-x64</code>, Linux defaults to <code>gcc-x64</code>, and macOS defaults to <code>clang-x64</code>. Select a specific IntelliSense mode to override the <code>${default}</code> mode.</span>
        </div>
        <div>
          <select name="inputValue" id="intelliSenseMode" class="select-default">
            <option value="${default}">${default}</option>
            <option value="clang-x86">clang-x86</option>
            <option value="clang-x64">clang-x64</option>
            <option value="clang-arm">clang-arm</option>
            <option value="clang-arm64">clang-arm64</option>
            <option value="gcc-x86">gcc-x86</option>
            <option value="gcc-x64">gcc-x64</option>
            <option value="gcc-arm">gcc-arm</option>
            <option value="gcc-arm64">gcc-arm64</option>
            <option value="msvc-x86">msvc-x86</option>
            <option value="msvc-x64">msvc-x64</option>
            <option value="msvc-arm">msvc-arm</option>
            <option value="msvc-arm64">msvc-arm64</option>
          </select>
        </div>
        <div id="intelliSenseModeInvalid" class="error" style="width: 290px"></div>
    </div>

    <div class="section">
        <div class="section-title" data-loc-id="include.path">Include path</div>
        <div class="section-text">
            <span data-loc-id="include.path.description">An include path is a folder that contains header files (such as <code>#include "myHeaderFile.h"</code>) that are included in a source file. Specify a list of paths for the IntelliSense engine to use while searching for included header files. Searching on these paths is not recursive. Specify <code>**</code> to indicate recursive search. For example, <code>${workspaceFolder}/**</code> will search through all subdirectories while <code>${workspaceFolder}</code> will not.  If on Windows with Visual Studio installed, or if a compiler is specified in the <code>compilerPath</code> setting, it is not necessary to list the system include paths in this list.</span>
        </div>
        <div>
          <div class="section-note" data-loc-id="one.include.path.per.line">One include path per line.</div>
          <textarea name="inputValue" id="includePath" rows="4" cols="93" style="width: 800px"></textarea>
          <div id="includePathInvalid" class="error" style="margin-top: -4px; width: 794px"></div>
        </div>
    </div>

    <div class="section">
        <div class="section-title" data-loc-id="defines">Defines</div>
        <div class="section-text" data-loc-id="defines.description">A list of preprocessor definitions for the IntelliSense engine to use while parsing files. Optionally, use <code>=</code> to set a value, e.g. <code>VERSION=1</code>.</div>
        <div>
            <div class="section-note" data-loc-id="one.definition.per.line">One definition per line.</div>
            <textarea name="inputValue" id="defines" rows="4" cols="39"></textarea>
        </div>
    </div>

    <div class="section">
        <div class="section-title" data-loc-id="c.standard">C standard</div>
        <div class="section-text" data-loc-id="c.standard.description">The version of the C language standard to use for IntelliSense. Note: GNU standards are only used to query the set compiler to get GNU defines, and IntelliSense will emulate the equivalent C standard version.</div>
        <div>
            <select name="inputValue" id="cStandard" class="select-default">
                <option value="c17">c17</option>
                <option value="c11">c11</option>
                <option value="c99">c99</option>
                <option value="c89">c89</option>
                <option value="gnu17">gnu17</option>
                <option value="gnu11">gnu11</option>
                <option value="gnu99">gnu99</option>
                <option value="gnu89">gnu89</option>
            </select>
        </div>
    </div>

    <div class="section">
        <div class="section-title" data-loc-id="cpp.standard">C++ standard</div>
        <div class="section-text" data-loc-id="cpp.standard.description">The version of the C++ language standard to use for IntelliSense. Note: GNU standards are only used to query the set compiler to get GNU defines, and IntelliSense will emulate the equivalent C++ standard version.</div>
        <div>
            <select name="inputValue" id="cppStandard" class="select-default">
                <option value="c++20">c++20</option>
                <option value="c++17">c++17</option>
                <option value="c++14">c++14</option>
                <option value="c++11">c++11</option>
                <option value="c++03">c++03</option>
                <option value="c++98">c++98</option>
                <option value="gnu++20">gnu++20</option>
                <option value="gnu++17">gnu++17</option>
                <option value="gnu++14">gnu++14</option>
                <option value="gnu++11">gnu++11</option>
                <option value="gnu++03">gnu++03</option>
                <option value="gnu++98">gnu++98</option>
            </select>
        </div> 
    </div>

    <hr>
    <button id=showAdvanced class="headerBtn" style="margin-top: 5px; font-size: 20px; font-weight: 500; width: 100%; text-align: left" data-loc-id="advanced.settings">Advanced Settings</button>
    <div style="height: 30px; display: block"></div>

    <div id=advancedSection>

        <div class="section">
            <div class="section-title" data-loc-id="configuration.provider">Configuration provider</div>
            <div class="section-text" data-loc-id="configuration.provider.description">The ID of a VS Code extension that can provide IntelliSense configuration information for source files. For example, use the VS Code extension ID <code>ms-vscode.cmake-tools</code> to provide configuration information from the CMake Tools extension.</div>
            <div>
                <input name="inputValue" id="configurationProvider" style="width: 290px"></input>
            </div>
        </div>

        <div class="section">
            <div class="section-title" data-loc-id="windows.sdk.version">Windows SDK version</div>
            <div class="section-text" data-loc-id="windows.sdk.version.description">The version of the Windows SDK include path to use on Windows, e.g. <code>10.0.17134.0</code>.</div>
            <div>
                <input name="inputValue" id="windowsSdkVersion" style="width: 290px"></input>
            </div>
        </div>

        <div class="section">
            <div class="section-title" data-loc-id="mac.framework.path">Mac framework path</div>
            <div class="section-text" data-loc-id="mac.framework.path.description">A list of paths for the Intellisense engine to use while searching for included headers from Mac frameworks. Only supported on configurations for macOS.</div>
            <div>
                <div class="section-note" data-loc-id="one.path.per.line">One path per line.</div>
                <textarea name="inputValue" id="macFrameworkPath" rows="4" cols="93" style="width: 800px"></textarea>
                <div id="macFrameworkPathInvalid" class="error" style="margin-top: -4px; width: 794px"></div>
            </div>
        </div>

        <div class="section">
            <div class="section-title" data-loc-id="forced.include">Forced include</div>
            <div class="section-text" data-loc-id="forced.include.description">A list of files that should be included before any other characters in the source file are processed. Files are included in the order listed.</div>
            <div>
                <div class="section-note" data-loc-id="one.file.per.line">One file per line.</div>
                <textarea name="inputValue" id="forcedInclude" rows="4" cols="93" style="width: 800px"></textarea>
                <div id="forcedIncludeInvalid" class="error" style="margin-top: -4px; width: 794px"></div>
            </div>
        </div>

        <div class="section">
            <div class="section-title" data-loc-id="compile.commands">Compile commands</div>
            <div class="section-text">
                <span data-loc-id="compile.commands.description">The full path to the <code>compile_commands.json</code> file for the workspace. The include paths and defines discovered in this file will be used instead of the values set for <code>includePath</code> and <code>defines</code> settings. If the compile commands database does not contain an entry for the translation unit that corresponds to the file you opened in the editor, then a warning message will appear and the extension will use the <code>includePath</code> and <code>defines</code> settings instead.</span>
            </div>
            <div>
                <input name="inputValue" id="compileCommands" style="width: 798px"></input>
                <div id="compileCommandsInvalid" class="error" style="width: 800px"></div>
            </div>
        </div>

        <div class="section">
            <div class="section-title" data-loc-id="browse.path">Browse: path</div>
            <div class="section-text">
                <span data-loc-id="browse.path.description">A list of paths for the Tag Parser to search for headers included by your source files. If omitted, <code>includePath</code> will be used as the <code>path</code>. Searching on these paths is recursive by default. Specify <code>*</code> to indicate non-recursive search. For example: <code>/usr/include</code> will search through all subdirectories while <code>/usr/include/*</code> will not.</span>
            </div>
            <div>
                <div class="section-note" data-loc-id="one.browse.path.per.line">One browse path per line.</div>
                <textarea name="inputValue" id="browsePath" rows="4" cols="93" style="width: 800px"></textarea>
                <div id="browsePathInvalid" class="error" style="margin-top: -4px; width: 794px"></div>
            </div>
        </div>

        <div class="section">
            <div class="section-title" data-loc-id="limit.symbols">Browse: limit symbols to included headers</div>
            <div>
                <input type="checkbox" id="limitSymbolsToIncludedHeaders" style="vertical-align: middle; transform: scale(1.5)">
                    <span data-loc-id="limit.symbols.checkbox">When true (or checked), the Tag Parser will only parse code files that have been directly or indirectly included by a source file in <code>${workspaceFolder}</code>. When false (or not checked), the Tag Parser will parse all code files found in the paths specified in the <code>Browse: path</code> list.</span>
                </input>
            </div>
        </div>

        <div class="section">
            <div class="section-title" data-loc-id="database.filename">Browse: database filename</div>
            <div class="section-text">
                <span data-loc-id="database.filename.description">The path to the generated symbol database. This instructs the extension to save the Tag Parser's symbol database somewhere other than the workspace's default storage location. If a relative path is specified, it will be made relative to the workspace's default storage location, not the workspace folder itself. The <code>${workspaceFolder}</code> variable can be used to specify a path relative to the workspace folder (e.g. <code>${workspaceFolder}/.vscode/browse.vc.db</code>)</span>
            </div>
            <div>
                <input name="inputValue" id="databaseFilename" style="width: 798px"></input>
                <div id="databaseFilenameInvalid" class="error" style="width: 800px"></div>
            </div>
        </div>

    </div> <!-- advanced settings end -->

    <!-- sections end -->

  </div> <!-- main end -->

  <script nonce="{{nonce}}" src="{{settings_js_uri}}"></script>

</body>
</html>
